import Blockquote from "@/components/Blockquote";
import { ProCard, ProDescriptions } from "@ant-design/pro-components";
import { Avatar, Button, Card, Col, message, Skeleton, Space, Typography, Upload } from "antd";
import React, { useEffect, useState } from "react";
import companyBg from "@/assets/companyInfo.jpg";
import logo from "@/assets/logo.svg";
import { changeLogo, getCurrentTenant, updateLogo } from "@/services/api/module/tenant/tenant/tenants";
import { getDict } from "@/services/api/module/system/dict";
import DictTag from "@/components/DictTag";
import styles from "./style/index.module.less";
import ImgCrop from "antd-img-crop";
import { CloudUploadOutlined } from "@ant-design/icons";
import { useSelector } from "react-redux";
import { RootState } from "@/store";
import RcResizeObserver from "rc-resize-observer";
const CompanyInfo = () => {
	const [responsive, setResponsive] = useState(false);
	const [data, setData] = useState<API.Tenant.TenantVo>();
	const [loading, setLoading] = useState<boolean>(true);
	const [industry, setIndustry] = useState<any>([]);
	const [scale, setScale] = useState<any>([]);
	const [messageApi, contextHolder] = message.useMessage();
	const { themeConfig } = useSelector((state: RootState) => state.global);

	useEffect(() => {
		getDict("company_scale").then(data => {
			setScale(data);
		});
		getDict("company_industry").then(data => {
			setIndustry(data);
		});
		getData();
	}, []);

	const getData = () => {
		setLoading(true);
		getCurrentTenant().then(data => {
			setLoading(false);
			setData(data);
		});
	};
	const changeLogo = (value: any) => {
		let data = new FormData();
		data.append("logoFile", value);
		messageApi.open({
			type: "loading",
			content: "正在处理修改LOGO请稍等...",
			duration: 0
		});
		updateLogo(data)
			.then((res: any) => {
				messageApi.destroy();
				message.success(res?.msg);
				getData();
			})
			.catch(() => {
				messageApi.destroy();
			});
	};
	return (
		<RcResizeObserver
			key="resize-observer"
			onResize={offset => {
				setResponsive(offset.width < 596);
			}}
		>
			<div style={{ padding: responsive ? "0" : "0 25%" }}>
				{contextHolder}
				<ProCard
					bodyStyle={{
						minHeight: "calc(100vh - 90px)"
					}}
				>
					<div
						style={{
							borderRadius: "6px",
							height: 112,
							background: themeConfig?.isDark
								? undefined
								: `${responsive ? `url(${companyBg}) 0% 80% / 300% no-repeat` : `url(${companyBg}) 0% 82% / 120% no-repeat`}`,
							display: "flex",
							padding: "0 10px",
							border: themeConfig?.isDark ? "1px solid" : undefined
						}}
					>
						{loading ? (
							<Space>
								<Skeleton.Image style={{ width: 60, height: 60 }} />
								<Space direction="vertical" size={1}>
									<Skeleton.Input active size={"small"} block />
									<Skeleton.Input active size={"small"} block />
								</Space>
							</Space>
						) : (
							<Space>
								{/* <Avatar shape="square" size={60} src={data?.logo} /> */}
								<div className={styles.container}>
									<Avatar shape="square" className={styles.avatar} size={60} src={data?.logo} />
									<div className={styles.mask}></div>
									<ImgCrop showGrid rotationSlider modalTitle="裁切图像" onModalOk={changeLogo}>
										<Upload showUploadList={false}>
											<Button ghost className={styles.button} type="link" shape="circle">
												<CloudUploadOutlined style={{ fontSize: "20px", color: "white" }} />
											</Button>
										</Upload>
									</ImgCrop>
								</div>
								<Space direction="vertical" size={1}>
									<Typography.Title level={5} style={{ marginBottom: 0 }}>
										{data?.companyName}
									</Typography.Title>
									<Typography.Text type="secondary" style={{ marginBottom: 0 }}>
										企业公司编号 : {data?.tenantId}
									</Typography.Text>
								</Space>
							</Space>
						)}
					</div>
					<br />
					<ProDescriptions
						loading={loading}
						column={responsive ? 1 : 2}
						layout={"vertical"}
						title={<Blockquote>基础信息</Blockquote>}
						// layout={"vertical"}
						colon={false}
						dataSource={data}
						columns={[
							{
								title: "企业编号",
								key: "tenantId",
								dataIndex: "tenantId",
								editable: false,
								copyable: true
							},
							{
								title: "行业",
								key: "industry",
								valueType: "select",
								dataIndex: "industry",
								valueEnum: industry,
								formItemProps: {
									style: {
										width: 280
									},
									rules: [
										{
											required: true,
											message: "此项为必填项"
										}
									]
								},
								render: (_, record) => {
									return <DictTag enums={industry} type="normal" value={record?.industry} />;
								}
							},
							{
								title: "规模",
								key: "scale",
								dataIndex: "scale",
								valueType: "select",
								valueEnum: scale,
								formItemProps: {
									style: {
										width: 200
									}
								},
								render: (_, record) => {
									return <DictTag enums={scale} type="normal" value={record?.scale} />;
								}
							},
							{
								title: "统一社会信用代码",
								key: "licenseNumber",
								dataIndex: "licenseNumber",
								editable: false,
								copyable: true,
								valueType: "select"
							},
							{
								title: "简介",
								key: "intro",
								dataIndex: "intro",
								valueType: "textarea",
								copyable: true,
								formItemProps: {
									style: {
										width: responsive ? 280 : 600
									}
								}
							}
						]}
						editable={{
							onSave: async (keypath, newInfo, oriInfo) => {
								console.log(keypath, newInfo, oriInfo);
								return true;
							}
						}}
					/>
					<br />
					<ProDescriptions
						loading={loading}
						column={responsive ? 1 : 2}
						title={<Blockquote>联系方式</Blockquote>}
						layout={"vertical"}
						colon={false}
						dataSource={data}
						columns={[
							{
								title: "联系人姓名",
								key: "contactRealName",
								dataIndex: "contactRealName",
								copyable: true
							},
							{
								title: "联系人手机",
								key: "contactPhone",
								dataIndex: "contactPhone",
								copyable: true
							},
							{
								title: "座机",
								key: "telephone",
								dataIndex: "telephone",
								copyable: true
							},
							{
								title: "邮编",
								key: "contactEmail",
								dataIndex: "contactEmail",
								copyable: true
							},
							{
								title: "企业地址",
								key: "address",
								dataIndex: "address",
								copyable: true,
								valueType: "textarea",
								formItemProps: {
									style: {
										width: 600
									}
								}
							}
						]}
						editable={{
							onSave: async (keypath, newInfo, oriInfo) => {
								console.log(keypath, newInfo, oriInfo);
								return true;
							}
						}}
					/>
				</ProCard>
			</div>
		</RcResizeObserver>
	);
};
export default CompanyInfo;
